<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="module" src="./node_modules/pdfjs-dist/build/pdf.mjs"></script>
</head>
<body>
	<div id="thumbnails">

	</div>
	<script type="module">
		pdfjsLib.GlobalWorkerOptions.workerSrc = './build/pdf.worker.mjs';

		// PDF 文件的路径
		const pdfUrl = './web/compressed.tracemonkey-pldi-09.pdf';

		// 加载 PDF 文件
		pdfjsLib.getDocument(pdfUrl).promise.then((pdf) => {
				// 获取 PDF 的总页数
				const numPages = pdf.numPages;

				// 创建一个容器来存放缩略图
				const thumbnailsContainer = document.getElementById('thumbnails');

				// 循环遍历每一页
				for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
						pdf.getPage(pageNumber).then((page) => {
								// 获取页面的尺寸
								const viewport = page.getViewport({ scale: 0.5 });

								// 创建一个 canvas 元素
								const canvas = document.createElement('canvas');
								const context = canvas.getContext('2d');
								canvas.width = viewport.width;
								canvas.height = viewport.height;

								// 渲染页面到 canvas
								const renderContext = {
										canvasContext: context,
										viewport: viewport
								};
								page.render(renderContext).promise.then(() => {
										// 将 canvas 添加到缩略图容器中
										thumbnailsContainer.appendChild(canvas);
								});
						});
				}
		}).catch((error) => {
				console.error('Error loading PDF:', error);
		});
	</script>
</body>
</html>